<template>
  <div>
    <el-form :model="elderForm" :rules="rules" ref="elderForm" label-width="150px" class="demo-ruleForm" label-position="left">
      <el-form-item label="住户姓名:" prop="elderId" >
        <el-select v-model="elderForm.elderId" filterable placeholder="请选择">
          <el-option
            v-for="item in elderInfoList"
            :key="item.elderId"
            :label="item.elderName"
            :value="item.elderId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务时长(按月录入):" prop="liveMonth">
        <el-input-number v-model="elderForm.liveMonth" :min="1" :max="36" label=""></el-input-number>
      </el-form-item>
      <el-form-item label="服务项目(多选):" prop="projectIds" >
        <el-select v-model="elderForm.projectIds" multiple placeholder="请选择">
          <el-option
            v-for="item in nurseList"
            :key="item.nurseId"
            :label="item.nurseName+': '+item.nursePrice"
            :value="item.nurseId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注:" prop="desc" style="width: 40%">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          rows="3"
          v-model="elderForm.notes"
          maxlength="200"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-tag type="info">温馨提示：所有服务均按月收费，后续退费以实际情况为准</el-tag>
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即创建</el-button>
        <!--                    <el-button @click="resetForm('ruleForm')">重置</el-button>-->
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
  import {getRoomAndProject} from "@/api/business/elderlyapartment";
  import {addCheckupInfo} from "@/api/business/checkupInfo";
  import {createOrder} from "@/api/business/order";
  import {listAllElderInfo} from "@/api/business/elderInfo";

  export default {
    name: "orderFrom",
    data() {
      return {
        priceList: {},
        nurseList: {},
        elderInfoList:{},
        form: {
          customerName: null,
        },
        elderForm:{
          liveMonth:6,
        },
        rules:{
          projectIds: [
            { required: false, type: 'array', min: 1, message: '请选择服务项目', trigger: 'change' }
          ],
          desc: [
            { required: false, message: '请输入备注', trigger: 'blur' }
          ]
        },
      }
    },
    created() {
      this.getAprtRoomAndProject();
      this.getElderInfoList();
    },
    methods: {
      getAprtRoomAndProject(){
        getRoomAndProject().then(response=>{
          this.priceList = response.price;
          this.nurseList = response.nurse;
          console.log(this.priceList)
          console.log(this.nurseList)
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["elderForm"].validate(valid => {
          if (valid) {
            let totalAmount = 0;
            this.priceList.forEach(item => {
              if (this.elderForm.roomPriceId == item.roomPriceId) {
                this.elderForm.roomPriceId = item.roomPriceId;
                this.elderForm.roomName = item.roomName;
                this.elderForm.roomType = item.roomType;
                this.elderForm.roomPrice = item.roomPrice;
                totalAmount = totalAmount + parseInt(item.roomPrice);
              }
            });
            this.nurseList.forEach(item => {
              if (this.elderForm.projectIds.includes(item.nurseId)) {
                totalAmount = totalAmount + parseInt(item.nursePrice);
              }
            });
            this.elderForm.projectIds = this.elderForm.projectIds.join(',');
            this.elderForm.totalAmount = totalAmount;
            createOrder(this.elderForm).then(response => {
              this.$modal.msgSuccess("创建成功");
              let orderData = response.data;
              // 触发自定义事件，并传递数值
              this.$emit('return-value',orderData);
            });
            console.log(this.elderForm);
            //表单重置
            this.elderForm = {};
          }
        });
      },
      getElderInfoList(){
        listAllElderInfo().then(response => {
          this.elderInfoList = response.rows;
        })
      },
    }
  }
</script>

<style scoped>

</style>
